<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
    />
    <style>
      .swiper {
        width: 800px;
        height: 400px;
      }
      .swiper img {
        width: 100%;
        height: 100%;
        display: block;
        border: none;
      }
    </style>
  </head>
  <body>
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <a href="#"><img src="img/4.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="img/2.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="img/3.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="img/1.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="img/5.jpg" alt="" /></a>
        </div>
        <div class="swiper-slide">
          <a href="#"><img src="img/6.jpg" alt="" /></a>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
    </div>
    <!-- 导航等组件可以放在Swiper容器之外 -->
  </body>
  <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
  <script>
    var mySwiper = new Swiper(".swiper", {
      // direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项

      // 设置Slide的切换效果，
      effect: "fade",
      // effect: 'cube',
      // effect: 'coverflow',
      // slidesPerView: 3,
      // centeredSlides: true,
      effect: "flip",
      effect: "cards",

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        // 设置分页器样式
        type: "bullets",
        clickable: true,
        // type: 'fraction',
        //  type : 'progressbar',
        //type : 'custom',
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      // scrollbar: {
      //   el: ".swiper-scrollbar",
      // },

      // Autoplay 设置自动轮播
      // autoplay: true, //等同于以下设置
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: true,
      },

      // 设置开启键盘来控制Swiper切换
      keyboard: true,
      //或者
      /* keyboard: {
        enabled: true,
        onlyInViewport: true,
      }, */
    });
    // 鼠标经过停止自动轮播，鼠标离开开始自动切换 mySwiper.autoplay.stop()
    //鼠标覆盖停止自动切换
    mySwiper.el.onmouseover = function () {
      mySwiper.autoplay.stop();
    };

    //鼠标离开开始自动切换
    mySwiper.el.onmouseout = function () {
      mySwiper.autoplay.start();
    };

    //鼠标滑过pagination控制swiper切换
    for (i = 0; i < mySwiper.pagination.bullets.length; i++) {
      mySwiper.pagination.bullets[i].onmouseover = function () {
        this.click();
      };
    }
  </script>
</html>
